<template>
  <div>
    <el-button type="primary" @click="setContent">设置内容</el-button>
    <el-button type="success" @click="getContent">获取内容</el-button>

    <!-- 渲染富文本编辑器 :menus="menus"-->
    <VueWangeditor ref="editor" v-model="content"  id="editor" width="100%"/>
    <!-- 绘制折线图 -->
    <Vcharts :option="linesOption" areaId="lines" height="400px" width="100%"/>
    <!-- 绘制饼状图 -->
    <Vcharts :option="pieOption" areaId="pie"/>
    <!-- 绘制柱状图 -->
    <el-card>
      <div id="bar" style="height: 400px"></div>
    </el-card>
  </div>
</template>

<script>
// 导入echarts
import * as echarts from "echarts";
// 导入Vcharts组件
import Vcharts from "../components/Vcharts";
// 导入vue-wangeditor
import VueWangeditor from 'vue-wangeditor';
export default {
  data() {
    return {
      content:`
        <h1>hello wangeditor</h1>
        <img src="https://www.baidu.com/img/PCjing_5e539553b5304b9f43deb8a0fc918e45.png"/>
      `,
      menus:[
        'bold',	// 粗体
        'underline',	// 下划线
        'italic',	// 斜体
        'strikethrough',	// 中线
        'eraser',	// 清空格式
        'forecolor',	// 文字颜色
        'bgcolor',	// 背景颜色
      ],
      // 折线图配置对象
      linesOption:{
        // 图形标题
        title: {
          text: "本周销售业绩",
        },
        // 鼠标经过提示框
        tooltip: {
          trigger: "axis",
        },
        // 缩放工具
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "星期一",
            "星期二",
            "星期三",
            "星期四",
            "星期五",
            "星期六",
            "星期天",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            // 图形类型
            type: "line",
            areaStyle: {},
          },
        ],
      },
      // 饼状图的配置对象
      pieOption: {
        title: {
          text: "某站点用户访问来源",
          subtext: "纯属虚构",
          left: "center",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "搜索引擎" },
              { value: 735, name: "直接访问" },
              { value: 580, name: "邮件营销" },
              { value: 484, name: "联盟广告" },
              { value: 300, name: "视频广告" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
    };
  },
  components: {
    Vcharts,
    VueWangeditor
  },
  mounted() {
    this.bar();
  },
  methods: {
    getContent(){
      const html=this.$refs.editor.getHtml();
      console.log(html);
    },
    setContent(){
      this.$refs.editor.setHtml(`
          <h1>你好, 富文本编辑器</h1>
      `);
    },
    // 绘制主状态
    bar() {
      // 1-获取绘制区域的DOM对象
      const dom = document.querySelector("#bar");
      // 2-初始化
      const instance = echarts.init(dom);
      // 3-配置对象
      var option = {
        title: {
          text: "本周销售业绩",
        },
        // 鼠标经过提示框
        tooltip: {
          trigger: "axis",
        },
        // 缩放工具
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
            showBackground: true,
            backgroundStyle: {
              color: "rgba(180, 180, 180, 0.2)",
            },
          },
        ],
      };
      // 4-设置配置对象&绘制图形
      instance.setOption(option);
    },
  },
};
</script>

<style>
</style>